iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
0
自我挑戰組

CSS 大全(第四版)閱讀筆記系列 第 9

Day9【主題二:轉場】_過場回到原始狀態/可動畫屬性/列印轉場...

  • 分享至 

  • xImage
  •  
  1. 反向:過場回到原始狀態
  • 要特別小心祖先與後裔同時具有轉場效果的情況。
  • CSS轉場規範提供了縮短反向轉場的方式。當正向動畫完成達最緩值,觸發transitionend事件後,所有的瀏覽器(edge除外)都會將transition-delay複製到反向的狀態。
  1. 可動畫屬性與設定值
  • 判斷屬性能不能動畫的原則就是,要是能找出兩個屬性值的中點,屬性值就有可能可以動畫。
  • 數值類屬性大多可以動畫。
  • 關鍵字不行動畫。
  • 縮寫屬性不行動畫。例:border(因為含border-style;但是border-width可以)
  • 長度、百分比單位、色彩會轉為數值。
  1. 備案:轉場是增強
  • 轉場是使用者介面的增強,缺少完整的支援(指兼容性)使用者可能錯過一些有趣的效果,但並不會錯過任何內容。
  1. 列印轉場
  • chrome列印在頁面上的數值會使用呼叫print函式時的狀態值。
  • firefox由轉場的觸發方式,決定列印時的數值。
  • 如果有設置列印樣式表的規則,就不會受轉場效果影響。

上一篇
Day8【主題二:轉場】_控制轉場步調的機制/延遲轉場時間
下一篇
Day10【主題三:動畫】_定義keyframe/設定keyframe動畫
系列文
CSS 大全(第四版)閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言